<template>
  <div>
    <div class="tou">
      <div class="tout"><img src="./assets/网易云音乐.png" alt="" /></div>
      <div class="zi">网&nbsp;易&nbsp;云&nbsp;音&nbsp;乐</div>
      <div class="jt">
        <img src="./assets/按钮_箭头向左_o.png" alt="" />
        <img src="./assets/按钮-箭头向右_o.png" alt="" />
      </div>
      <div class="input">
        <img src="./assets/搜索 (1).png" alt="" />
        <input type="text" placeholder="   搜索" />
      </div>
      <div class="you">
        <img src="./assets/QQ图片20220523164033.png" alt="" />
      </div>
    </div>
    <div class="zhong">
      <div class="zhong1">
        <div class="gezi">发现音乐</div>
         <div class="geziz">博客</div>
         <div class="geziz">视频</div>
         <div class="geziz">关注</div>
         <div class="geziz">直播</div>
         <div class="geziz">私人FM</div>
<div class="ye">我的音乐</div>
         <div class="geziz">
           <img src="./assets/云端下载.png" alt="">
           本地与下载
         </div>
         <div class="geziz">
           <img src="./assets/民族风-最近播放.png" alt="">
           最近播放
         </div>
         <div class="geziz">
           <img src="./assets/云.png" alt="">
           我的音乐云盘
         </div>
         <div class="geziz">
           <img src="./assets/音乐 (2).png" alt="">
           我的博客
         </div>
         <div class="geziz">
           <img src="./assets/收藏_o.png" alt="">
           我的收藏
         </div>
         <div class="ye">创建的歌单</div>
         <div class="geziz">
           <img src="./assets/喜欢.png" alt="">
           我喜欢的音乐
         </div>
         <div class="geziz">
           <img src="./assets/喜欢.png" alt="">
           我喜欢的音乐
         </div>
         <div class="geziz">
           <img src="./assets/喜欢.png" alt="">
           我喜欢的音乐
         </div>
         <div class="geziz">
           <img src="./assets/喜欢.png" alt="">
           我喜欢的音乐
         </div>
        
      
       
      </div>
       <div class="zhong2"><shouye></shouye></div>
    </div>
    <div class="gq">

    </div>
















  </div>
</template>

<script>

import shouye from "./components/lyc-shouye.vue"
  
export default {
  name: "App",
  components: {
    shouye
  },
  // methods:{

  //   getStudents(){

  //     axios.get("http://localhost:3000/user/detail?uid=32953014").then(

  //       response=>{
  //         console.log("获取数据成功",response.data);
  //       },

  //       err=>{
  //         console.log("获取数据失败"+err);
  //       }
  //     )
  //   }

  // }
};
</script>

<style scoped>
* {
   padding: 0;
  margin: 0;
 
}

.tou {
  width: 100%;
  height: 4vw;
  background-color: #ec4141;
  display: flex;
}
.tout {
  width: 3vw;
  height: 3vw;
}
.tou img {
  width: 3vw;
  height: 3vw;
  position: relative;
  top: 0.5vw;
  left: 2vw;
  transform: scale(0.8);
}
.zi {
  position: relative;
  left: 2.5vw;
  line-height: 4vw;
  font-size: 1.3vw;
  color: rgb(255, 255, 255);
}
.jt {
  display: flex;
  position: relative;
  left: 5vw;
  /* background-color: aqua; */
}
.jt img {
  width: 3vw;
  transform: scale(0.8);
}
.input {
  width: 15vw;
  height: 2vw;
  border: 1px solid white;
  position: relative;
  left: 10vw;
  top: 1vw;
  background-color: rgb(245, 238, 238, 0.5);
  border-radius: 10vw;
  display: flex;
}
.input img {
  width: 2vw;
  height: 2vw;
  position: relative;
  left: 0vw;
  top: 0vw;
}
input {
  width: 11vw;
  background-color: rgb(255, 250, 250, 0);
  border: none;
  font-size: 1vw;
}
.you img {
  width: 35vw;
  height: 4.8vw;
}
.you {
  position: relative;
  top: -1vw;
  left: 30vw;
}
.zhong {
  width: 100%;
  height: 80vh;
  /* background-color: violet; */
  display: flex;
}
.zhong1{
  width: 17vw;
  height: 80vh;
  background-color: rgb(143, 238, 130);
  border-right: 1px solid gray;
}
.zhong2{
  width: 83vw;
  height: 80vh;
  /* background-color: rgb(163, 163, 226); */
}
.gq {
  width: 100%;
  height: 20vh;
  background-color: rgb(41, 223, 223);
  position: fixed;
   border-top: 1px solid gray;

}
.gezi{
  width: 90%;
  height: 2.5vw;
  background-color: tomato;
  margin: auto;
  font-size: 1.3vw ;
  line-height: 2.5vw;
  box-sizing: border-box;
  padding-left: 0.5vw;
  font-weight: bolder;
  margin-top: 0.3vw;
}
.geziz{
  width: 90%;
  height: 2.5vw;
  background-color: tomato;
  margin: auto;
  font-size: 1vw ;
  line-height: 2.5vw;
  box-sizing: border-box;
  padding-left: 0.5vw;
 display: flex;
  margin-top: 0.15vw;
}
.ye{
  position: relative;
  left: 1vw;
  margin-top: 0.6vw;
  margin-bottom: 0.6vw;
}
.geziz img{
  width: 1.9vw;
  height: 1.9vw;
  margin-top: 0.4vw;
  margin-right: 0.5vw;
  }

























</style>
